<script setup>
import {Delete, Edit, Iphone, Search} from "@element-plus/icons-vue";
import {reactive, ref, onMounted} from "vue";
import {listDevice} from "@/api/system/device";


const form = reactive({
  deviceId: '',
  deviceName: '',
  status: '',
  type: '',
})

onMounted(() => {
  getList()
})

const devices = ref([]);

const getList = (form) => {
  listDevice().then(res => {
        devices.value = res.data;
      }
  );
}
const onSubmit = () => {
  console.log('搜索!')
}
</script>

<template>
  <div class="box">
    <el-form :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="设备ID">
        <el-input style="width: 150px" v-model="form.deviceId" placeholder="设备ID" clearable/>
      </el-form-item>
      <el-form-item label="设备名称">
        <el-input style="width: 150px" v-model="form.deviceName" placeholder="设备名称" clearable/>
      </el-form-item>
      <el-form-item label="选择状态">
        <el-select
            style="width: 120px"
            v-model="form.status"
            placeholder="选择状态"
            clearable>
          <el-option label="在线" value="0"/>
          <el-option label="离线" value="1"/>
        </el-select>
      </el-form-item>
      <el-form-item label="选择类型">
        <el-select
            style="width: 120px"
            v-model="form.type"
            placeholder="选择类型"
            clearable>
          <el-option label="日常" value="0"/>
          <el-option label="肉鸽" value="1"/>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit" :icon="Search">搜索</el-button>
      </el-form-item>
    </el-form>

    <div class="device-list">
      <div class="device-item" v-for="device in devices">
        <el-icon size="80" :color="device.isConnect === 1 ?'#0078d4':'inherit'">
          <Iphone/>
        </el-icon>
        <span>{{ device.deviceName }}</span>
        <span>{{ device.deviceId }}</span>
        <div class="device-operate">
          <el-button link type="danger" :icon="Delete"/>
          <el-button link type="primary" :icon="Edit"/>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
.box {
  display: flex;
  height: auto;
  border-radius: 2px;
  flex-direction: column;
}

.el-form {
  width: 100%;
  display: flex;
  align-items: start;
  flex-flow: wrap;
  justify-content: left;
}

.device-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}

.device-item {
  width: 120px;
  min-height: 170px;
  border-radius: 5px;
  padding: 5px;
  margin: 10px;
  box-shadow: 0 0 10px darkgray;
  display: flex;
  align-items: center;
  justify-content:  space-between;
  flex-direction: column;
}

.device-operate {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.ellipsis {
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 使用省略号显示超出部分 */
  max-width: 200px;
}
</style>
